<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }

.play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }

.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; }
.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(img/loading.gif) no-repeat center center; }

.mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { width: 60px; height: 60px; background: url(img/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; cursor: pointer; filter:alpha(opacity: 0); opacity:0; }
.big_pic .next { width: 60px; height: 60px; background: url(img/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001;cursor: pointer; filter:alpha(opacity: 0); opacity:0; }

.big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; }
.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }
.big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; }
.small_pic ul {width:1000px; height: 94px; position: absolute; top: 0; left: 0; }
.small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; background: url(img/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; }
.small_pic img { width: 120px; height: 94px; }
</style>
<script src="move.js"></script>
<script>
function getByClass(oParent, sClass)
{
	if(document.all){
		return document.getElementsByClassName(sClass);	
	}else{
	var aEle=document.getElementsByTagName('*');
	var i=0;
	var aResult=[];
	
	for(i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sClass)
		{
			aResult.push(aEle[i]);
		}
	}
	
	return aResult;
	}
}

window.onload=function(){
	var oDiv=document.getElementById('playimg');
	var oBtnPrev=getByClass(oDiv,'prev')[0];
	var oBtnNext=getByClass(oDiv, 'next')[0];
	var oMarkLeft=getByClass(oDiv, 'mark_left')[0];
	var oMarkRight=getByClass(oDiv, 'mark_right')[0];
	var oSmallUl=getByClass(oDiv, 'small_pic')[0].getElementsByTagName('ul')[0];
	var aSmallLi=oSmallUl.getElementsByTagName('li');
	var oBigUl=getByClass(oDiv, 'big_pic')[0];
	var aBigLi=oBigUl.getElementsByTagName('li');
	var iNow=0;
	var iMinZindex=2;
	oSmallUl.style.width=aSmallLi.length*aSmallLi[0].offsetWidth+'px';
	//上面的左右按钮
	oMarkLeft.onmouseover=oBtnPrev.onmouseover=function(){
		move(100,oBtnPrev,'opacity')	
	};
	oMarkLeft.onmouseout=oBtnPrev.onmouseout=function(){
		move(0,oBtnPrev,'opacity')	
	};
	oMarkRight.onmouseover=oBtnNext.onmouseover=function(){
		move(100,oBtnNext,'opacity')	
	};
	oMarkRight.onmouseout=oBtnNext.onmouseout=function(){
		move(0,oBtnNext,'opacity')	
	};
	
	for(var i=0;i<aSmallLi.length;i++){
		aSmallLi[i].index=i;		
		aSmallLi[i].onmouseover=function(){
			move(100,this,'opacity')	
		};	
		aSmallLi[i].onmouseout=function(){
			if(this!==iNow){
				move(60,this,'opacity')	
			}
		};	
	};
	
	
	
};
</script>
</head>

<body>
<div id="playimg" class="play">
    <ul class="big_pic">
		<div class="prev"></div>
		<div class="next"></div>

		<div class="text">加载图片说明……</div>
		<div class="length">计算图片数量……</div>
		
		<a class="mark_left" href="javascript:;"></a>
		<a class="mark_right" href="javascript:;"></a>
		<div class="bg"></div>
		
        <li style="z-index:1;"><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
        <li><img src="img/4.jpg" /></li>
        <li><img src="img/5.jpg" /></li>
        <li><img src="img/6.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul>
            <li style="filter: 100; opacity: 1;"><img src="img/1.jpg" /></li>
            <li><img src="img/2.jpg" /></li>
            <li><img src="img/3.jpg" /></li>
            <li><img src="img/4.jpg" /></li>
            <li><img src="img/5.jpg" /></li>
            <li><img src="img/6.jpg" /></li>
        </ul>
    </div>
</div>
</body>
</html>
